import './index.css'
import {Button, Form, Input, Space, Toast} from "antd-mobile";
import {EyeInvisibleOutline, EyeOutline} from "antd-mobile-icons";
import React, {useState} from "react";
import {userInfo, UserInfo} from "../../Datasource";

export interface LoginProps {
    setLoginInfo: (item: any,isLogin:string) => void
}

const Login = (props: LoginProps) => {
    const {setLoginInfo} = props;
    const [visible, setVisible] = useState(false)
    const onFinish = (values: any) => {
        const item = userInfo.find(e => e.phone === values.username)
        if (item) {
            if (values.password) {
                if (item.password === values.password) {
                    Toast.show({
                        icon: 'success',
                        content: '登录成功'
                    })
                    setLoginInfo(item,'true')
                } else {
                    Toast.show({
                        icon: 'fail',
                        content: '密码错误'
                    })
                    return
                }
            } else {
                Toast.show({
                    icon: 'fail',
                    content: '请输入密码'
                })
                return
            }
        } else {
            Toast.show({
                icon: 'fail',
                content: '账户不存在'
            })
            return
        }
    }

    return (
        <div className={'login-form'}>
            <Form layout='horizontal' onFinish={onFinish} mode={'card'} footer={
                <Button block type='submit' color='primary' size='large'>
                    登录
                </Button>
            }>
                <Form.Item label='用户名' name='username'>
                    <Input placeholder='用户名' clearable/>
                </Form.Item>
                <Form.Item
                    label='密码'
                    name='password'
                    extra={
                        <div className={"eye"}>
                            {!visible ? (
                                <EyeInvisibleOutline onClick={() => setVisible(true)}/>
                            ) : (
                                <EyeOutline onClick={() => setVisible(false)}/>
                            )}
                        </div>
                    }
                >
                    <Input
                        placeholder='密码'
                        clearable
                        type={visible ? 'text' : 'password'}
                    />
                </Form.Item>
            </Form>
        </div>
    )
}
export default Login
